/**
 * @author gyb(mocheer) 
 * @email mocheer@foxmail.com
 * @param date 2016.3.24
 * 
 * @param zy9稍微改动了下item传出方式及传入参数
 * @param date 2017.9.26
 */
import React, { Component, PropTypes } from 'react'
import classNames from 'classnames'
import './css/NavTabControl.css'

/**
 * props{title,content,footer}
 */
export default class NavTabControl extends Component {
    /**
     * 
     * @param {*} props 
     */
    constructor(props) {
        super(props);
        this.state = {
            selIndex: 0
        };
    }
    /**
     * 
     * @param {*} index 
     */
    onClick(index, param) {
        let { props } = this;
        param.index = index;
        props.onClick && props.onClick(param)
        this.setState({ selIndex: index })
    }
    /**
     * 渲染
     */
    render() {
        let { props, state, onClick } = this,
            { height, children, width } = props,
            { selIndex } = state,
            list = [],
            selItem

        children = children.length ? children : [children]
        height = height || 50
        let ch = 33;//nav 高度
        for (let i = 0, l = children.length, item, li, label; i < l; i++) {
            item = children[i]

            let { props } = item
            if (!props.height && height > 50) {
                props.height = height - ch;
            }
            label = <a>{(l === 1 && state.label) || props.label}</a>
            if (i === selIndex) {
                selItem = item;   
                li = <td key={i} className="active">{label}</td>
            } else {
                li = <td key={i} role='button' onClick={onClick.bind(this, i, props)}>{label}</td>
            }
            list.push(li)
        }
        //nav-pills 胶囊式标签页
        //nav-stacked 垂直排列 
        //nav-justified 同等宽度
        let ulClassName ='nav nav-tabs nav-justified';
        return (
            <div className="NavTab" style={{ height,width }}>
                <table className="tab">  
                    <tr>{list}</tr>
                </table>
                {selItem}
            </div>
        );
    }
}
/**
 * 
 */
NavTabControl.defaultProps = {

}